<template>
  <el-dialog :title="dataList.text" :visible.sync="dataList.type">
    <el-form :model="dataList">

      <el-form-item label="ID" :label-width="formLabelWidth" hidden>
        <el-input v-model="dataList.id" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="等级名称" :label-width="formLabelWidth">
        <el-input v-model="dataList.name" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="等级" :label-width="formLabelWidth">
        <el-input-number
          v-model="dataList.grade"
          controls-position="right"
          @change="handleChange"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="享受折扣" :label-width="formLabelWidth">
        <el-input-number
          v-model="dataList.discount"
          controls-position="right"
          @change="handleChange2"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="等级经验值" :label-width="formLabelWidth">
        <el-input-number
          v-model="dataList.exp_num"
          controls-position="right"
          @change="handleChange3"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="图标" :label-width="formLabelWidth">
        <el-upload
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :http-request="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="dataList.icon" :src="dataList.icon" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="会员背景" :label-width="formLabelWidth">
        <el-upload
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :http-request="handleAvatarSuccesss"
          :before-upload="beforeAvatarUploads"
        >
          <img v-if="dataList.image" :src="dataList.image" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="是否显示" :label-width="formLabelWidth">
        <el-radio-group v-model="radio" @change="gai">
          <el-radio label="1">显示</el-radio>
          <el-radio label="0">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="等级说明" :label-width="formLabelWidth">
        <el-input v-model="dataList.explain" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dataList.type = false">取消</el-button>
      <el-button type="primary" @click="sure"> 确定 </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { MemberImage } from "../api/index";
export default {
  props: ["dataList"],
  data() {
    return {
      formLabelWidth: "120px",
      radio: '1',
      mgs: "",
      mgss: "",
      radio:"1"
    };
  },

  methods: {
    gai(val){
      this.radio=val
    },
    sure() {
      this.dataList.is_show=this.radio
      this.dataList.is_show=this.dataList.is_show*1
      this.$emit("add",this.dataList)
    },
     handleChange(value) {
      },
      handleChange2(value) {
      },
      handleChange3(value) {
      },
      handleAvatarSuccess(res, file) {
      let formdata = new FormData();
      formdata.append("pid", 0);
      formdata.append("file", this.imgs);
      MemberImage(formdata).then((res) => {
        if (res.data.status == 200) {
          this.$message({
          message: res.data.msg,
          type: 'success'
        });
          this.dataList.icon = "http://bw.gsruiying.com.cn/" + res.data.data.src;
        }else{
          this.$message({
          message: res.data.msg,
          type: 'error'
        });
        }
      });
    },
    beforeAvatarUpload(file) {
      this.imgs = file;
    },
    handleAvatarSuccesss(res, file) {
      let formdata = new FormData();
      formdata.append("pid", 0);
      formdata.append("file", this.imgss);
      MemberImage(formdata).then((res) => {
        if (res.data.status == 200) {
          this.$message({
          message: res.data.msg,
          type: 'success'
        });
          this.dataList.image = "http://bw.gsruiying.com.cn/" + res.data.data.src;
        } else {
          this.$message({
          message: res.data.msg,
          type: 'error'
        });
        
        }
      });
    },
    beforeAvatarUploads(file) {
      this.imgss = file;
    },
  },
};
</script>
<style lang='scss' scoped>
img {
  width: 100px;
  height: 100px;
}
</style>